<template>
  <div class="user-center-container">
    
    <!-- 侧边栏 -->
    <User_center_sidebar :active="$route.params.tab || 'overview'" />
    <!-- 主内容区 -->
    <div class="main-layout">
      <div class="content-area">
        <div class="page-content-wrapper">
          <router-view v-slot="{ Component }">
            <transition name="fade-transform" mode="out-in">
              <keep-alive>
                <component :is="Component" />
              </keep-alive>
            </transition>
          </router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import User_center_sidebar from './User_center_sidebar.vue'

const user = {
  name: '张三',
  avatar: '/avatars/student001.png'
}
</script>

<style scoped>
.user-center-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8fbff 0%, #e3edfa 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-family: 'Helvetica Neue', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.main-layout {
  margin-top: 0px; /* 保持此值，使外部容器与顶部导航栏和侧边栏衔接 */
  padding-top: 0; /* 移除内部填充，由 margin-top 处理间距 */
  min-height: calc(100vh - 120px);
  max-width: 1400px; /* 恢复为外部容器的最大宽度 */
  margin-left: auto; /* 使用 auto 确保居中 */
  margin-right: auto; /* 使用 auto 确保居中 */
  box-sizing: border-box;
}

.content-area {
  flex: 1;
  padding: 0 0 32px 0; /* 保持此值，不影响子页面的水平对齐 */
  min-width: 0;
  max-width: 100vw;
  box-sizing: border-box;
  background: none;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-content-wrapper {
  width: 100%;
  max-width: 1200px; /* 保持此值，作为子页面内容的外部容器宽度 */
  padding: 0 20px; /* 恢复水平内边距，让内部内容有默认间距 */
  box-sizing: border-box;
}

.welcome-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 30px;
  text-align: center;
  color: #4a6fa5;
  font-size: 1.2rem;
  box-shadow: 0 8px 32px rgba(107, 155, 210, 0.1);
  border: 1px solid rgba(107, 155, 210, 0.1);
}

@media (max-width: 1200px) {
  .main-layout {
    max-width: 100%;
    margin-top: 140px;
    padding-top: 0;
  }
  .content-area {
    padding: 12px 0 12px 0;
  }
  .page-content-wrapper {
    padding: 0 10px;
  }
}

@media (max-width: 768px) {
  .main-layout {
    flex-direction: column;
    margin-top: 140px;
    padding-top: 0;
  }
  .content-area {
    padding: 6px 0;
  }
  .page-content-wrapper {
    padding: 0 5px;
  }
}

/* 路由切换动画 */
.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: all 0.3s;
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>
